<template>
  <div class="addJobTable">
    <Card style="height:380px">
    <Form :model="addJobForm" :label-width="80" :rules="ruleInline" ref="addJobForm">
      <Row>
        <Col span="10">
          <FormItem label="任务名称" prop="jobName">
            <Input v-model="addJobForm.jobName" placeholder="输入任务名称"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="10">
          <FormItem label="任务金额" prop="gold">
            <InputNumber  :max="100000" :min="1" v-model="addJobForm.gold" style="width: 220px"></InputNumber>
          </FormItem>
        </Col>
        <Col span="14">
          <FormItem label="完成时间" prop="jobTime">
            <Row>
              <Col span="15">
                <DatePicker type="date" placeholder="选择时间" v-model="addJobForm.jobTime"></DatePicker>
              </Col>
            </Row>
          </FormItem>
        </Col>
        <Col span="18">
          <FormItem label="任务描述" prop="jobDescribe">
            <Input type="textarea" v-model="addJobForm.jobDescribe" minRows="2" maxRows="5" placeholder="输入任务描述"></Input>
          </FormItem>
        </Col>
        <FormItem>
          <Button type="primary" @click="addJob">发布任务</Button>
          <Button style="margin-left: 8px">重置</Button>
        </FormItem>

      </Row>




    </Form>
    </Card>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "addJobTable",
    props: {
      jobType:{
        type:String,
        require:true,
        default:'网站构建'
      }
    },
    data (){
      return {
        addJobForm:{
          jobType:'',
          jobDescribe:'',
          jobState:'0',
          gold: 1,
          jobTime: null,
          userId:this.$getCookie("userId"),
        },
        ruleInline: {
          jobName: [
            {required: true, message: '请输入任务名称', trigger: 'blur'}
          ],
          // gold: [
          //   {required: true, message: '请输入任务金额', trigger: 'blur'}
          // ],
          jobDescribe: [
            {required: true, message: '请输入任务简介', trigger: 'blur'},
          ],
          // jobTime: [
          //   {required: true, message: '请输入任务时间.', trigger: 'blur'},
          // ],
        }
      }
    } ,
    methods:{
      addJob(){
        const that = this
        this.$refs.addJobForm.validate((valid) => {
          if (valid) {
            this.addJobForm.jobType = that.jobType
            this.addJobForm.jobTime = this.formateDate(this.addJobForm.jobTime)
            axios.get('http://localhost:8888/jobController/addJob', {params: this.addJobForm}).then(res => {
              if (res) {
                this.$Message.success('发布任务成功，欢迎访问！');
                this.$refs.addJobForm.resetFields()
              } else {
                this.$Message.error('发布失败!');
              }
            })
          }
        })
      },
      formateDate(datetime) {
        function addDateZero(num) {
          return (num < 10 ? '0' + num : num)
        }
        const d = new Date(datetime)
        return d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds())
      },
    }
  }
</script>

<style scoped>
  .addJobTable{

  }
</style>
